<template>
  <div>
    <search-bar />
    <div class="back">
      <div @click="back()">
        <i class="iconfont icon-lujing"></i>
        返回
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div class="name">Lorem ipsum dolor sit amet, consectetur</div>
        <div class="tag">RcsChat App</div>
      </div>
      <div class="userinfo">
        <div class="avatar">
          <img :src="articleData.logo" alt="" />
          <span class="username">{{ articleData.accountName }}</span>
        </div>
        <div class="time">
          <i class="iconfont icon-shijian"></i>
          <span>{{ getLocalTime(articleData.gmtCreate) }}</span>
        </div>
      </div>
      <div class="article" v-html="articleData.content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
          imperdiet amet, fringilla feugiat. Semper habitant pretium, felis
          velit massa tristique mattis. At ultrices et feugiat at. Elit nibh
          nisi, accumsan a orci liberoAt ultrices et feugiat at. Elit nibh nisi.
        </p>
        <img
          src="@/assets/img/avatar.jpg"
          alt=""
          preview="@/assets/img/avatar.jpg"
        />
      </div>
      <div class="addcomment">
        <div class="addbutton" @click="showEditor = !showEditor">添加评论</div>
        <div class="like">
          <i class="iconfont icon-zan"></i>
          <span>赞 {{ articleData.thumbsUpCount }}</span>
        </div>
      </div>
      <div class="editorcomment" v-show="showEditor">
        <quill-editor
          ref="myTextEditor"
          v-model="content"
          :options="editorOption"
          style="height: 400px"
        ></quill-editor>
        <div class="submit">
          <div class="button">发布评论</div>
        </div>
      </div>
      <div class="floor">
        <div class="header">全部评论（3）</div>
        <div class="commentlist">
          <div class="nocomment" style="display: none">
            <img src="@/assets/img/dev_nocomments@2x.png" alt="" />
            <div class="nocomment-text">
              <div class="nocomment-text-left">暂无评论</div>
              <div class="nocomment-text-right">我要评论</div>
            </div>
          </div>
          <div class="item-comment" ref="comment">
            <div class="item" v-for="item in commentList" :key="item.id">
              <div class="item-header">
                <div class="avatar">
                  <img src="@/assets/img/avatar.jpg" alt="" />
                  <span class="username">asdasd</span>
                </div>
                <div class="time">
                  <span>2020-12-02 14:20</span>
                </div>
              </div>
              <div
                class="item-content"
                :class="!item.heightStatus ? 'hidden' : ''"
              >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo
                in imperdiet amet. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Commodo in imperdiet
                amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Commodo in imperdiet amet.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Commodo in imperdiet amet.Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
                imperdiet amet.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet.v
                <div class="more" v-if="!item.heightStatus">
                  <div class="text">
                    显示全部
                    <i class="iconfont icon-dev_Unfold"></i>
                  </div>
                </div>
                <div class="closemore" v-else>
                  <div class="text">
                    收起
                    <i class="iconfont icon-dev_Putaway"></i>
                  </div>
                </div>
              </div>
              <!-- <div class="more" style="display: block">
                <div class="text">
                  显示全部
                  <i class="iconfont icon-dev_Unfold"></i>
                </div>
                <div class="text">
                  收起
                  <i class="iconfont icon-dev_Putaway"></i>
                </div>
              </div> -->
              <div class="option">
                <div class="like">
                  <i class="iconfont icon-zan"></i>
                  <span>赞 23</span>
                </div>
                <div class="comment">
                  <i class="iconfont icon-huifu"></i>
                  <span>回复 23</span>
                </div>
              </div>
              <div class="item-comment-submit">
                <div class="item-header">
                  <div class="avatar">
                    <img src="@/assets/img/avatar.jpg" alt="" />
                  </div>
                  <div class="textarea">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      placeholder="我也想说一句"
                      v-model="textarea2"
                      maxlength="200"
                      show-word-limit
                    >
                    </el-input>
                  </div>
                  <div class="submit">
                    <div class="button">发布评论</div>
                  </div>
                </div>
              </div>
              <div class="item-comment-comment">
                <div class="item-header">
                  <div class="avatar">
                    <img src="@/assets/img/avatar.jpg" alt="" />
                    <span class="username">asdasd</span>
                  </div>
                  <div class="time">
                    <span>2020-12-02 14:20</span>
                  </div>
                </div>
                <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Commodo in imperdiet amet.
                </div>
                <div class="option">
                  <div class="like">
                    <i class="iconfont icon-zan"></i>
                    <span>赞 23</span>
                  </div>
                  <div class="comment">
                    <i class="iconfont icon-huifu"></i>
                    <span>回复 23</span>
                  </div>
                  <div class="delete" @click="deletereply()">删除</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="commentpage">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
            class="center"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="delete_Visible" width="397px">
      <span class="delete-text">确定要删除此条内容吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delete_Visible = false">取 消</el-button>
        <el-button type="primary" @click="delete_Visible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
var _this;
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import Search from "@/components/Search";
import { getPost } from "@/api/home";
import { rules, editorOption, handlers } from "@/utils/rules";
import {
  getEvaluate,
  postEvaluate,
  deleteEvaluate,
  getEvaluatelist,
} from "@/api/evaluate";
import { getLocalTime } from "@/utils";

export default {
  name: "art",
  components: {
    SearchBar: Search,
    quillEditor,
  },
  data() {
    return {
      showEditor: true,
      content: "",
      editorOption: {
        // 编辑器自定义
        placeholder: "编辑文章内容",
        modules: {
          toolbar: {
            container: editorOption.modules.toolbar,
            handlers: handlers,
          },
        },
      },
      textarea2: "",
      delete_Visible: false,
      postData: {
        id: "",
      },
      articleData: {
        accountId: null,
        accountName: "yunxiaotian602",
        content: "123123123",
        evaluateCount: 1,
        evaluates: null,
        gmtCreate: 1589863791000,
        gmtModified: null,
        id: null,
        image: null,
        labelId: "1",
        labelName: "平台使用",
        logo: "",
        status: null,
        text: null,
        thumbsUpCount: 2,
        title: "测试",
        topping: 1,
      },
      commentForm: {
        pageNum: 1,
        pageSize: 20,
      },
      commentList: [],
    };
  },
  created() {
    _this = this;
  },
  mounted() {
    window.scrollTo(0, 0);
    console.log(this.$route.params.id);
    _this.postData.id = this.$route.params.id;
    _this.getPost();
    _this.getEvaluatelist();
  },
  methods: {
    getLocalTime(ns) {
      return getLocalTime(ns);
    },
    /**检查元素高度 */
    checkcommentlength() {
      this.$nextTick(() => {
        let commentlist = this.$refs.comment;
        let item = commentlist.getElementsByClassName("item");
        console.log(item);
        for (var i in item) {
          if (Object.prototype.hasOwnProperty.call(item, i)) {
            // console.log(i);
            // console.log(item[i].offsetHeight);
            _this.changeStatus(i, item[i].offsetHeight);
          }
        }
      });
    },
    /**改变伸缩状态 */
    changeStatus(length, height) {
      console.log(length, height);
      _this.commentList[length].heightStatus = height > 400 ? 1 : 0;
      console.log(_this.commentList);
    },
    back() {
      window.history.go(-1);
    },
    onEditorChange({ editor, html, text }) {
      console.log(editor, text);
      this.content = html;
    },
    deletereply() {
      _this.delete_Visible = true;
    },
    /**获取贴子详情 */
    getPost() {
      let data = _this.postData;
      getPost(data).then((res) => {
        console.log(res);
        _this.articleData = res.data;
      });
    },
    /**获取评论详情 */
    getEvaluatelist() {
      let data = {
        postId: _this.postData.id,
        pageNum: _this.commentForm.pageNum,
        pageSize: _this.commentForm.pageSize,
      };
      getEvaluatelist(data).then((res) => {
        console.log(res);
        _this.commentList = res.data.list;
        _this.checkcommentlength();
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url(@/assets/css/Article.less);
</style>